﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Token.Piker.Web.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>皮壳网用户登录</title>
    <link href="css/reset.css" rel="stylesheet" />
    <script src="js/fancyapps-fancyBox/lib/jquery-1.9.0.min.js"></script>
    <script src="js/jquery.corner.js"></script>
    <script type ="text/javascript">
        $(document).ready(function () {
            $("#form_login").corner("5px");
            $("#anchor_reg_button").corner("dog tr");
            $(".button").corner("3px");
        });
    </script>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            background-color: #7f8b9b;
        }

        #header {
            width: 100%;
            height: 40px;
            background-color: #5C646F;
            padding: 10px 0;
        }

            #header a {
                height: 20px;
                line-height: 20px;
                padding: 10px;
                background-color: #78B95F;
                color: rgba(0, 0, 0, 0.68);
                float: right;
                display: block;
                text-decoration:none;
            }

        #content_title {
            padding-top:40px;
        }

        .logo {
            text-align:center;
        }

        #content_title h1 {
            font-size: 24px;
            margin-bottom:24px;
        }

        .content_title_p {
            font-size: 16px;
            line-height:32px;
            height:32px;
        }

        #content_title h1, .content_title_p,.content_title_p a{
            font-family: STXingkai,STXinwei,FZYaoTi,FZShuTi,LiSu,KaiTi;
            text-align: center;
            color: white;
        }

        #form_login {
            width: 600px;
            margin: 40px auto;
            background-color: #5A626D;
            padding:20px;
        }

        #form_title p {
            font-size:20px;
            color:#aaa;
            border-bottom:1px solid #525C68;
        }

        .form_p {
            margin-top:30px;
            padding-left:100px;
        }

            .form_p label {
                display:inline-block;
                width:100px;
                text-align:right;
                color:white;
                font-size:14px;
                font-weight:bold;
            }

        .textbox_border {
            background-color: #3F464E;
            border: 1px solid #aaa;
            vertical-align:middle;
            color:white;
        }

        .submit_p {
            margin-top:40px;
            padding-left:280px;
        }

        .button {
            background-color: #78B95F;
            border-style:none;
        }

        #Img {
            vertical-align:middle;
            margin-right:10px;
        }

        .padding_left110px {
            padding-left:110px;
        }
    </style>
</head>
<body>
    <div id="header">
        <a href="Register.aspx" id ="anchor_reg_button">开启您的Piker之旅</a>
    </div>
    <div id="content">
        <div id="content_title">
            <p class ="logo"><img src ="Images/logo.png" alt ="皮壳" /></p>
            <h1>登录到皮壳网</h1>
            <p class ="content_title_p"><a href ="Register.aspx">还没注册？立即注册，轻松开启Piker之旅</a></p>
        </div>
        <form id="form_login" runat="server" defaultbutton ="btnLogin">
            <div id="form_title">
                <p>登录</p>
            </div>
            <p class ="form_p">
                <label for="txtUserName">
                    <strong>用户名：</strong></label>
                <asp:TextBox ID="txtUserName" runat="server" Width="198" Height="25" CssClass="textbox_border"></asp:TextBox>
                <br />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="用户名不能为空" CssClass ="padding_left110px"
                    ControlToValidate="txtUserName"></asp:RequiredFieldValidator>
            </p>
            <p class ="form_p">
                <label for="txtPassword">
                    <strong>密码：</strong></label>
                <asp:TextBox ID="txtPassword" runat="server" Width="198" Height="25" CssClass="textbox_border"
                    TextMode="Password"></asp:TextBox>
                <br />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="密码不能为空" CssClass ="padding_left110px"
                    ControlToValidate="txtPassword"></asp:RequiredFieldValidator>
            </p>
            <p class ="form_p" id ="p_ValidateCode" runat="server">
                <label for="txtValidateCode">
                    <strong>验证码:</strong></label>
                <img id="Img" runat="server" src="ValidateCode.aspx" mce_src="ValidateCode.aspx"
                    alt="验证码" style="cursor: pointer;" onclick="this.src=this.src+'?'" title="看不清？换一张" />
                <asp:TextBox ID="txtValidateCode" runat="server" Width="98" Height="25" CssClass="textbox_border"></asp:TextBox>
                <br />
                <asp:Label ID="lblValidateCodeTip" runat="server" Text="您已经累计错误三次，请输入验证码" ForeColor="Red" Visible="false" CssClass ="padding_left110px"></asp:Label>
            </p>
            <p class ="form_p" id ="p_Tip" runat="server" visible ="false">
                <asp:Label ID ="lblTip" runat ="server" Text ="用户名或密码错误" ForeColor ="Red" CssClass ="padding_left110px"></asp:Label>
            </p>
            <p class ="submit_p">
                <asp:Button ID="btnLogin" runat="server" Text="登录" Width="120" Height="40" Font-Bold="true" CssClass ="button" OnClick="btnLogin_Click" />
            </p>
        </form>
    </div>
</body>
</html>
